<{include file="Common/head"}>
<{include file="Common/menu"}>

<link href="_index_/yy/index.css" rel="stylesheet">
<link href="_index_/yy/laydate.css" rel="stylesheet">
<script src="_index_/yy/laydate.js"></script>
<script type="text/javascript" src="_index_/laydate/laydate.js"></script>


<style type="text/css">
    *{font-size: 15px!important;}
    .select_date{  width: 20%;  float: left;  }
    .table th, .table td{line-height: 30px!important;}
    .table-cont{
        width: 100%;
        max-height: 100%;
        overflow: auto;
        float: left;
    }

    .test-5::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
    .test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

    .time_table td{text-align:center;}
    tbody .pointer{cursor: pointer}

    .table th, .table td {
        word-break: normal;
    }

</style>

<section class="Hui-article-box">

    <div class="select_date">
        <span id="selectdata" class="">选择日期:</span>
        <div class="laydate-box">
            <input type="text" id="laydateInputs" placeholder="年-月-日">
        </div>
    </div>
<div id="table-cont"  class='table-cont test-5'>
    <!--今日项目预约时间占用表-->
    <table class="table table-border table-bordered table-hover time_table">

            <thead>
            <tr class="success" style="background: #eeeeee;">
                <td>时间</td>
                <?php
                foreach($projects as $k => $v){
                ?>
                <td><?php echo $v; ?></td>
                <?php
                }
                ?>
            </tr>
            </thead>

        <!--
    </table>
    <table class="table table-border table-bordered table-hover time_table">


        <?php
        dd($data);

?>-->
        <tbody >
        <?php
            foreach($data as $a => $b){
        ?>
                <tr>
                    <td><?php echo substr($a,0,5); ?></td>
                    <?php
                        foreach($b as $bk => $bv){
                        $sizeof_bv=sizeof($bv);
                    ?>

                    <{if condition="$sizeof_bv > 0"}>
                    <td class="pointer" >
                    <{else /}>
                    <td class="pointer" onclick="add('<{$a}>','<{$bk}>')">
                    <{/if}>



                        <?php
                            if(sizeof($bv)>0){

                                $html='';
                                $bv_count=sizeof($bv);
                                for($i=0;$i<$bv_count;$i+=2){
                                if($i+2<$bv_count){
                                $html.="<div onclick='modify({$bv[$i+1]})'>$bv[$i],</div>";
                                }else{
                                $html.="<div onclick='modify({$bv[$i+1]})'>$bv[$i]</div>";
                                }
                                }
                                echo $html;
                            }
                        ?>
                    </td>
                    <?php
                        }
                    ?>
                </tr>
        <?php
            }
        ?>
        </tbody>

    </table>
</div>
</section>


<{include file="Common/footer"}>
<script type="text/javascript">

    //传递两参数，时间、项目，打开弹窗页面，设置好选择的时间项目即可
    function add(time,position){
//        console.log(time)
//        console.log(position)
		date = $("#laydateInputs").val();

        if(document.body.clientWidth>760){
            layer.open({
                title:"添加",
                type: 2,
                area: ['900px', '600px'],
                fixed: false, //不固定
                maxmin: true,
                content: '/index/Index/tcadd?time='+time+'&position='+position+'&date='+date
            });
        }else{
            window.location.href = '/index/Index/tcadd?time='+time+'&position='+position+'&date='+date
        }

    }

    //查看与修改
    function modify(id){
        if(id>0){
            if(document.body.clientWidth>760){
                layer.open({
                    title:"查看",
                    type: 2,
                    area: ['900px', '600px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: "/index/Index/modify?id="+id+"&stype=1"
                });
            }else{
                window.location.href = "/index/Index/modify?id="+id+"&stype=1"
            }
        }
    }


    window.onload = function(){
        var tableCont = document.querySelector('#table-cont');
        function scrollHandle (e){

            var scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }

        tableCont.addEventListener('scroll',scrollHandle);
    };


    $(function(){
        set_time = getQueryVariable('time')?getQueryVariable('time'):getNowFormatDate();
        setTimeout("$('#laydateInputs').val(set_time);",500);

        //常规用法
        laydate.render({
            elem: '#laydateInputs' ,
            done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                window.location.href="/index/Set/timeemploy?time="+value;
                //$("#laydateInput").val();

            }
        });


        $("tbody tr").each(function(){
                $(this).children("td").each(function(i){
                    $(this).mouseover(function(){
                        $(this).parent().css("backgroundColor","");
                        $("tbody tr").each(function(){
                            $(this).children("td").each(function(j){
                                if(i==j){
                                    $(this).css("backgroundColor","#f5f5f5");
                                }
                            });
                        });
                    });
                    $(this).mouseout(function(){
                        $(this).parent().css("backgroundColor","");
                        $("tbody tr").each(function(){
                            $(this).children("td").each(function(k){
                                if(i==k){
                                    $(this).css("backgroundColor","");
                                }
                            });
                        });
                    });
                });

        });
    });


    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }


</script>